<template>
  <view class="su-actions-popup">
    <u-button class="su-actions-popup__handler" @click="show=!show">
      <text class="color-primary">{{label}}</text>
    </u-button>
    <u-popup :show="show" mode="bottom" round="10" @close="show=false" @open="show=true">
      <view class="su-actions-popup__container">
        <view class="su-actions-popup__header" v-if="$slots.header">
          <slot name="header"></slot>
        </view>
        <view class="su-actions-popup__body">
          <view class="su-actions-popup__list" v-for="(item,index) in actions" :key="index" @click="actionClick(item)">
            <view class="su-actions-popup__list-icon" :style="{backgroundColor:iconColors[index%iconColors.length]}">
              <text :class="item.icon || 'iconfont icon-shezhi2'"></text>
            </view>
            <view class="su-actions-popup__list-label">
              {{item.label}}
            </view>
            <view class="su-actions-popup__list-arrow">
              <text class="iconfont icon-arrow-right-line"></text>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  /**
   * @description 筛选form
   * @date 2022-03-12
   * @version v1.0.1
   * @author gf
   */
  export default {
    name: "su-actions-popup",
    props: {
      label: {
        type: String,
        default: '按钮文字'
      },
      actions: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data() {
      return {
        show: false,
        iconColors:[
          '#F59246','#4786EE','#18C68F','#95BE53','#F06262'
        ]
      };
    },
    watch: {
      show(val) {
        this.$store.commit('setPopupOpen', val)
      }
    },
    mounted() {},
    methods: {
      actionClick(item){
        this.$emit('action-click',item)
        if(item.route){
          this.$u.route(item.route)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .su-actions-popup {
    width: 100%;

    &__handler {
      width: auto;

    }

    &__icon {
      width: 80upx;
      height: 80upx;
      font-size: 32upx;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &__container {
      margin-bottom: var(--window-bottom);
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      height: 65vh;
      overflow: auto;
    }

    &__header {
      border-bottom: solid 20upx #f7f7f7;
    }

    &__body {
      padding: 10upx 0;
    }
    &__list{
      display: flex;
      align-items: center;
      height: 100upx;
      border-bottom: solid 1upx #f7f7f7;
      padding: 0 30upx;
      &:active{
        background-color: #f7f7f7;
      }
      &-icon{
        margin-right: 20upx;
        width: 54upx;
        height: 54upx;
        border-radius: 10upx;
        background-color: $u-primary;
        display: flex;
        justify-content: center;
        align-items: center;
        text{
          font-size: 28upx;
          color: #fff;
        }
      }
      &-label{
        font-size: 30upx;
        flex: 1;
      }
      &-arrow{
        text{
          font-size: 24upx;
        }
        color: #aaa;
      }
    }
  }
</style>
